<template lang="pug">
  v-container
    AssetStockDetails(ref="assetDetail" :asset = "assetStock" @refresh="refresh")
    v-card
      v-toolbar
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="add") 新增资产
          v-btn(text @click="exportAssetExcelTemplate") 导出Excel模板
          v-btn(text @click="exportDataAsExcel") 导出资产
          v-btn(text @click="importAssetExcel") 导入Excel数据

          input(v-show="false" type="file" ref="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @input="onImportFileChange")
      v-divider
      v-card-text.pa-0.mt-4
        AssetStockDataTable(@edit="edit" ref="dataGrid" :query.sync = "query")

</template>
<script lang="ts">
  import Vue from 'vue'
  import {mapActions} from 'vuex'
  import AssetStockDataTable from './asset_stock_data_table'
  import {AssetStock} from '../../store/modules/types/AssetStock'
  import AssetMixin from '../asset/AssetMixin'
  import AssetStockDetails from './asset_stock_details'

  export default Vue.extend({
    mixins: [AssetMixin],
    props: [],
    methods: {
      ...mapActions('assetStock', {
        downloadTemplate: 'downloadAssetImportTemplate',
        downloadExcel: 'downloadExcel',
        import: 'import'
      }),
      ...mapActions('asset', {
        bootstrap: 'bootstrap'
      }),
      add() {
        this.assetStock = {
          name: '',
          product_model_number: '',
          description: '',
          init_quantity: 0,
          marking_price_per_unit: 0,
          bid_price_per_unit: 0,
          category_id: null,
          sub_category_id: null,
          brand_id: null,
          affiliation_id: null,
          keeper_id: null,
          vendor_id: null,
          location_id: null
        }
        this.$refs.assetDetail.toggle('新增资产', true)
      },
      edit(assetStock) {
        this.assetStock = assetStock
        // this.$refs.assetFormDialog.toggle(`编辑 ${this.assetStock.name}`)
        this.$refs.assetDetail.toggle(`资产 ${this.assetStock.name}`)
      },
      refresh() {
        this.$refs.dataGrid.refresh()
      },
    },
    computed: {},
    components: {AssetStockDataTable, AssetStockDetails},
    data() {
      return {
        assetStock: {} as AssetStock,
        query: ''
      }
    }
  })
</script>